<template>
	<view class="content">
		<view class="fixed-box"  :class="scrollTop>30?'bgWhite':''" >
			<view class="sys-head" view :style="{ height: statusBarHeight+'px' }"></view>
			<view class="header-title"  style="color:#333" >
				<view class="head-wrapper" :style="'top:'+statusBarHeight+'px'">
					<uni-icons  type="left" size="24" @click="onBack" color="#fff"></uni-icons>
				</view>
				<view class="title">车悦融</view>
			</view>
		</view>
		<view class="content-box" :style="{paddingTop : (43+statusBarHeight) + 'px'}" >
			<view class="apply-box">
				<view class="" style="text-align: center;" >
					<image src="../../static/title.png" class="titleImg" mode=""></image>
				</view>
				<view class="item flex-align-center">
					<view class="left">真实姓名</view>
					<view class="right">
						<input type="text" v-model="form.name" placeholder="请输入" />
					</view>
				</view>
				<view class="item flex-align-center">
					<view class="left">手机号码</view>
					<view class="right">
						<input type="number" v-model="form.phone" placeholder="请输入" />
					</view>
				</view>
				<view class="item flex-align-center">
					<view class="left">常住城市</view>
					<pickers @address="changeAddress">
						<view class="right flex-align-center" @click="selectCity">
							<input type="text" v-model="form.czdssq" disabled placeholder="请选择" />
							<uni-icons  style="margin-left: 24rpx;" type="bottom" size="20"  color="#999999"></uni-icons>
						</view>
					</pickers>
				</view>
				<view class="item">
					<view class="left">车牌号码</view>
					<view class="right flex-align-center" style="margin-top: 24rpx;" >
						<view class="number1" @click="selectCar(0)" >{{carNumber[0] || '省'}}</view>
						<view class="number1" @click="selectCar(1)">{{carNumber[1] || ''}}</view>
						<view class="circle"></view>
						<view class="number1" @click="selectCar(2)">{{carNumber[2] || ''}}</view>
						<view class="number1" @click="selectCar(3)">{{carNumber[3] || ''}}</view>
						<view class="number1" @click="selectCar(4)">{{carNumber[4] || ''}}</view>
						<view class="number1" @click="selectCar(5)">{{carNumber[5] || ''}}</view>
						<view class="number1" @click="selectCar(6)">{{carNumber[6] || ''}}</view>
						<view class="number1" @click="selectCar(7)" v-if="carNumber[7]" >{{carNumber[7]}}</view>
						<view class="number1 last" v-else @click="selectCar(7)" >
							<image src="../../static/newCar.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="item flex-align-center">
					<view class="left">购车方式</view>
					<view class="right" >
						<view class="flex-align-center buyWay">
							<view class="flex-aj-center" :class="current==0?'active':''" @click="current = 0" >全款</view>
							<view class="flex-aj-center" :class="current==1?'active':''" @click="current = 1">分期已结清</view>
							<view class="flex-aj-center" :class="current==2?'active':''" @click="current = 2">分期未结清</view>
						</view>
					</view>
				</view>
				<view class="applyNow flex-aj-center" @click="onSubmit" >立即申请</view>
			</view>
			<view class="applySteps">
				<view class="title">申请流程</view>
				<view class="steps flex-align-center">
					<view class="">
						<view class="number">01</view>
					</view>
					<image src="../../static/jiantou.png" mode=""></image>
					<view class="">
						<view class="number">02</view>
					</view>
					<image src="../../static/jiantou.png" mode=""></image>
					<view class="">
						<view class="number">03</view>
					</view>
					<image src="../../static/jiantou.png" mode=""></image>
					<view class="">
						<view class="number">04</view>
					</view>
				</view>
				<view class="stepText flex-align-center">
					<view>线上申请</view>
					<view>客服联系</view>
					<view>贷款审批</view>
					<view>贷款发放</view>
				</view>
			</view>
			<view class="applyRequire">
				<view class="title">申请条件</view>
				<view class="desc">
					1、22-60周岁，中国大陆公民；<br />
					2、名下有车且未抵押，车龄10年以内
				</view>
			</view>
			<view class="produce">
				<view class="title">产品介绍</view>
				<view class="desc">
					融悦车主贷是浙江易顺融资担保与银行等金融机构合作伙伴共同推出的产品，为用户推荐优质的车辆融资服务，融资服务由持牌机构提供。
				</view>
			</view>
			<view class="tips">
				<view class="">本页面由浙江易顺融资担保有限公司提供</view>
				<view class="">浙icp备2023020784号-2A</view>
			</view>
		</view>
		<view >
			<u-keyboard ref="uKeyboard" mode="car" :mask-close-able="false" :mask="false" @change="valChange" @backspace="backspace" :confirmBtn="true" v-model="showCar"></u-keyboard>
		</view>
		<!-- <view>
			<image class="home_image" src="../../static/announcement_img.png"></image>
		</view> -->
		<!-- <view class="form_box">
			<view class="form_item">
				<view class="label">车辆型号</view>
				<view class="form_content">
					<input v-model="form.carDiy" placeholder-style="font-size:32rpx" placeholder="请输入车辆型号" />
				</view>
			</view>
			<view class="form_item">
				<view class="label">首次上牌</view>
				<view class="form_content">
					<picker mode="date" @change="(e)=>selectValue('time',e)">
						<view :class="form.time ? 'is_value_color' : 'no_value_color'">
							{{form.time || '请选择首次上牌时间'}}
						</view>
					</picker>
				</view>
			</view>
			<view class="form_item">
				<view class="label">所在城市</view>
				<view class="form_content">
					<pickers @address="e=>selectValue('czdssq',e)">
						<view :class="form.czdssq ? 'is_value_color' : 'no_value_color'">
							{{form.czdssq || '请选择所在城市'}}
						</view>
					</pickers>
				</view>
			</view>
			<view class="form_item">
				<view class="label">手机号码</view>
				<view class="form_content">
					<input type="number" v-model="form.phone" maxlength="11" placeholder="请输入手机号码" />
				</view>
			</view>
			<view class="form_item">
				<view class="label">短信验证</view>
				<view class="form_content">
					<view class="verify_code_box">
						<input type="text" v-model="form.vcode" placeholder="请输入短信验证码">
						<view @click="onSendVerifyCode" :class="sendVerifyState ? 'btn_send_code' :'btn_code'">
							{{codeText}}
						</view>
					</view>
				</view>
			</view>
			<view class="btn" @click="onSubmit">
				快速估值
			</view>
			<view class="bottom_text">
				<text>点击即代表同意</text>
				<text style="color: #FF3341;" @click="jump" >《个人信息保护声明》</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	import { submitAssess,getDicts } from '../../api/common';
	import {
		getSmsVcode
	} from '../../api/login';
	import {
		bindToken
	} from '../../utils/request';
	import pickers from '../../components/ming-picker/ming-picker.vue';

	export default {
		components: {
			pickers
		},
		data() {
			return {
				showCar:false,
				showPicker:false,
				scrollTop:0,
				current:0,
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				headOpacity:0,
				form: {
					name: '',
					phone:'',
					czdssq: '',
					isAnjie: ''
				},
				sendVerifyState: false,
				codeText: '获取验证码',
				verifyCount: 60,
				range: [],
				selectIndex: [0, 0, 0],
				carNumber:['','','','','','',''],
				carCurr:0,
				isLoginStatus:false
			}
		},
		mounted() {
			// const result = setArea(arae);
			// console.log(result)
			console.log(uni.getStorageSync("userPhone"))
			if(uni.getStorageSync("userPhone")){
				this.form.phone = uni.getStorageSync("userPhone")
			}
		},
		async onShow() {
			let that = this;
			const data = await bindToken('getToken');
			if (Object.values(data).length) this.isLoginStatus = true;
			if(!this.isLoginStatus){
				uni.navigateTo({
					url:'/pages/login/index'
				})
			}
			
			let source = uni.getSystemInfoSync().osName
			if(source.indexOf('ios')>-1){
				this.form.appStoreType = 6
			}else{
				if(plus.runtime.channel){
					getDicts('app_store_type').then(res=>{
						let arr = res.data;
						arr.forEach(item=>{
							if(item.dictLabel==plus.runtime.channel){
								that.form.appStoreType = item.dictValue
							}
						})
					})
				}else{
					this.form.appStoreType = 0
				}
			}
		},
		watch: {
			carCurr(newValue, oldValue) {
				console.log("当前下标==",newValue)
				if(newValue>0){
					this.$refs.uKeyboard.changeLang(true)
				}else{
					this.$refs.uKeyboard.changeLang(false)
				}
			}
		},
		methods: {
			valChange(e){
				this.carNumber[this.carCurr] = e+''
				if(this.carCurr<8){
					this.carCurr++
				}
				this.$forceUpdate()
			},
			backspace(){
				if(this.carCurr>0){
					this.carNumber[this.carCurr-1] = ''
					this.carCurr--
					this.$forceUpdate()
				} 
			},
			selectCar(index){
				console.log(index)
				// this.carCurr = index
				this.showCar = true
				console.log(this.$refs.uKeyboard)
			},
			changeAddress(e){
				console.log(e)
				let arr = [e.value[0],e.value[1]]
				console.log(arr)
				this.form.czdssq = arr.join(",")
			},
			selectCity(){
				this.showPicker = true
			},
			onBack(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
			jump(){
				uni.navigateTo({
					url:'/pages/aboutMy/index?title=个人信息保护声明&type=3'
				})
			},
			async onSubmit() {
				const values = await this.verifyForm([{
						name: 'name',
						message: '请输入真实姓名'
					},
					{
						name: 'phone',
						message: '请填写手机号'
					},
					{
						name: 'czdssq',
						message: '请选择城市'
					}
				], this.form);
				this.form.isAnjie = this.current==0?2:this.current==1?3:1
				let arr = this.carNumber.filter(item=>item!='')
				if(arr.length<7){
					uni.showToast({
						title:'请输入正确的车牌',
						icon:"none"
					})
					return;
				}
				this.form.carNumber = arr.join("")
				await submitAssess(this.form).then(res=>{
					uni.redirectTo({
						url:'/pages/success/index'
					});
				}).catch(err=>{
					return uni.showToast({
						title:err,
						icon:"none"
					})
				});
			},
			selectValue(key, val) {
				if (key === 'czdssq') {
					this.form[key] = val.value.join('-');
				} else {
					this.form[key] = val.detail.value;
				}
				this.$forceUpdate()
			},
			async onSendVerifyCode() {
				if(!this.form.phone){
					return uni.showToast({
						title:'请填写手机号',
						icon:"none"
					})
				}
				this.sendVerifyState = true;
				if (this.verifyCount === 60 && this.sendVerifyState) {
					let flag = setInterval(() => {
						this.verifyCount--;
						this.codeText = `${this.verifyCount}秒`;
						if (this.verifyCount === 1) {
							this.codeText = '获取验证码';
							this.sendVerifyState = false;
							this.verifyCount = 60;
							clearInterval(flag);
						}
					}, 1000);
					await getSmsVcode({
						phone: this.form.phone
					}).then(res=>{
						uni.showToast({
							icon: 'none',
							title: '发送成功，请耐心等待短信'
						})
					}).catch(err=>{
						uni.showToast({
							title:err,
							icon:"none"
						})
					})
					
				} else {
					uni.showToast({
						title: '请耐心等待倒计时结束',
						icon: 'none'
					})
				}
			},
			/**
			 * @param {Array} array 
			 * @param {Object} formValues
			 * @returns Promise
			 **/
			verifyForm(array, formValues) {
				return new Promise((resolve, reject) => {
					let result = true;
					for (let index = 0; index < array.length; index++) {
						const formItem = array[index];
						if (!formValues[formItem.name]) {
							result = false;
							uni.showToast({
								title: formItem.message,
								icon: 'none'
							});
							break;
						}
					}
					if (result) resolve({
						...formValues
					});
					else reject(false);
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #F5F7FA;
	}
</style>
<style lang="less" scoped>
	/deep/ .u-tooltip{
		width: 82%;
	}
	
	.content{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 880rpx;
		background-image: url(../../static/applyBg.png);
		background-size: cover;
	}
	
	.number1{
		width: 64rpx;
		height: 72rpx;
		background: #F5F9FF;
		border-radius: 4rpx;
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 16rpx;
		flex: 1;
		&.last{
			image{
				width: 16rpx;
				height: 56rpx;
			}
		}
	}
	
	.circle{
		width: 14rpx;
		height: 14rpx;
		background: #F5F9FF;
		border-radius: 50%;
		margin-right: 16rpx;
	}
	
	.content-box{
		padding: 260rpx 24rpx 100rpx;
		margin-top: 260rpx;
		.apply-box{
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 0 24rpx 48rpx;
			.titleImg{
				width: 516rpx;
				height: 64rpx;
				margin: 0 auto 16rpx;
			}
			.item{
				padding: 32rpx 0;
				border-bottom: 2rpx solid #F5F5F5;
				.left{
					font-family: PingFangSC;
					font-weight: 400;
					font-size: 28rpx;
					color: #292929;
					white-space: nowrap;
					margin-right: 48rpx;
				}
				.right{
					input{
						width: 442rpx;
						font-family: PingFangSC;
						font-weight: 400;
						font-size: 28rpx;
					}
				}
				.buyWay{
					>view{
						padding:14rpx 16rpx;
						background: #F5F9FF;
						border-radius: 4rpx;
						font-family: PingFangSC;
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;
						margin-right: 24rpx;
						&:last-child{
							margin-right: 0;
						}
						&.active{
							background: rgba(255,41,69,0.04);
							border: 1rpx solid rgba(255,41,69,0.08);
							font-family: PingFangSC;
							font-weight: 500;
							font-size: 28rpx;
							color: #FF2945;
						}
					}
				}
			}
		}
	}
	
	.applyNow{
		width: 654rpx;
		height: 96rpx;
		background: linear-gradient( 135deg, #FF8533 0%, #FF0011 100%);
		border-radius: 48rpx;
		font-family: PingFangSC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
	}
	
	.applySteps{
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 32rpx 24rpx;
		margin-top: 24rpx;
		.title{
			font-family: PingFangSC;
			font-weight: 500;
			font-size: 32rpx;
			color: #292929;
			margin-bottom: 32rpx;
		}
		.steps{
			padding: 0 50rpx;
			>view{
				width: 56rpx;
				height: 56rpx;
				background: #F5F9FF;
				border: 2rpx solid #D8DFEB;
				border-radius: 50%;
				font-family: PingFangSC;
				font-weight: 500;
				font-size: 28rpx;
				color: #8C9CB8;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			image{
				width: 78rpx;
				height: 8rpx;
				margin: 0 16rpx;
			}
		}
	}
	
	.stepText{
		margin-top: 16rpx;
		>view{
			width: 156rpx;
			height: 24rpx;
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			text-align: center;
			margin-right: 10rpx;
			&:last-child{
				margin-right: 0;
			}
		}
	}
	
	.applyRequire,.produce{
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 32rpx 24rpx;
		margin-top: 24rpx;
		.title{
			font-family: PingFangSC;
			font-weight: 500;
			font-size: 32rpx;
			color: #292929;
			margin-bottom: 32rpx;
		}
		.desc{
			margin-top: 24rpx;
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 44rpx;
		}
	}
	
	.tips{
		margin-top: 48rpx;
		text-align: center;
		:first-child{
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 24rpx;
			color: #C5D0E0;
		}
		:last-child{
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 24rpx;
			color: #C5D0E0;
			margin-top: 24rpx;
		}
	}
	
	.fixed-box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99;
		
		
	
		.header-title {
			height: 43px;
			display: flex;
			align-items: center;
			padding-left: 24rpx;
			
			.title{
				font-family: PingFangSC;
				font-weight: 500;
				font-size: 36rpx;
				color: #FFFFFF;
				margin-left: 66rpx;
			}
			
			.subtitle{
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 28rpx;
				color: rgba(255,255,255,0.72);
				padding-left: 16rpx;
			}
	
			.head-wrapper {
				z-index: 999;
				display: flex;
				align-items: center;
				position: fixed;
				left: 30rpx;
				top: 0;
				height: 43px;
				/* #ifdef MP */
				height: 43px;
				/* #endif */
				/* #ifdef H5 */
	
				/* #endif */
				.head-menu {
					display: flex;
					align-items: center;
					height: 43rpx;
					width: 140rpx;
					border-radius: 27rpx;
	
					.iconfont {
						flex: 1;
						text-align: left;
						color: #333;
						box-sizing: border-box;
					}
				}
			}
		}
		&.bgWhite{
			background-color: #fff;
			.title{
				color: #333;
			}
			
			.header-title{
				justify-content: center;
			}
			
			.subtitle{
				display: none;
			}
		}
	}
	
	.home_image {
		width: 100%;
		height: 240rpx;
	}

	.is_value_color {
		color: #292929;
	}

	.no_value_color {
		color: #999999;
	}

	.form_box {
		width: 100%;
		background-color: #fff;
		padding-bottom: 48rpx;

		.form_item {
			display: flex;
			align-items: center;
			width: 95%;
			padding: 48rpx 0;
			margin: auto;
			border-bottom: 1rpx solid #F5F5F5;

			.label {
				width: 20%;
				font-size: 32rpx;
				font-weight: 500;
				color: #292929;
			}

			.form_content {
				width: 80%;
				font-size: 32rpx;
				text-align: right;

				.verify_code_box {
					display: flex;
					justify-content: flex-end;
					align-items: center;

					.btn_send_code,
					.btn_code {
						width: 152rpx;
						line-height: 56rpx;
						text-align: center;
						margin-left: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #FFFFFF;
						background: #FF3341;
						border-radius: 8rpx;
					}

					.btn_send_code {
						width: 152rpx;
						height: 56rpx;
						background: rgba(255, 51, 65, 0.08);
						color: #FF3341;
					}
				}
			}
		}

		.btn {
			margin: 48rpx auto 0 auto;
			width: 430rpx;
			line-height: 104rpx;
			background: linear-gradient(135deg, #FF8533 0%, #FF0011 100%);
			border-radius: 52rpx;
			text-align: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 40rpx;
			color: #FFFFFF;
		}

		.bottom_text {
			margin: 24rpx 0;
			text-align: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #B8B8B8;
		}
	}

	.flow_box {
		padding: 48rpx 0;
		margin: 24rpx 0;
		width: 100%;

		.flow_title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-weight: 500;
			font-size: 32rpx;
			color: #292929;
			padding: 0 24rpx;

			.line {
				width: 246rpx;
				height: 12rpx;
			}
		}

		.flow_content {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 24rpx;
			margin-top: 48rpx;

			.process_icon {
				width: 40rpx;
				height: 40rpx;
			}

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				width: 186rpx;
				height: 132rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #292929;

				image {
					width: 88rpx;
					height: 88rpx;
				}
			}
		}

	}
</style>